<template>
	<view style="width: 100%;">
		<view class="kong" v-if="!system_list.length" style="">
			<image src="/static/icon/kong_icon_bg.png" style="width: 422rpx;height: 298rpx;" mode=""></image>
			<text class="kong__text">暂无内容</text>
		</view>
		<view v-else class="content" v-for="(item, index) in system_list" :key="index" @click="systemToId(item.anntId)">
			<view class="content__title">{{item.titile}}</view>
			<view class="content__box">
				<view class="content__box__content">
					<view class="content__box__content__time">{{item.sendTime}}</view>
					<view class="content__box__content__go">点击查看</view>
				</view>
			</view>
			<view class="content__red" v-if="item.readFlag == 0"></view>
		</view>
	</view>
</template>

<script>
	import {Debounce} from 'common/utils.js' // 防抖函数（减少函数的调用）
	import moment from 'utils/moment.min.js'
	
	export default { 
		data() {
			return {
				system_list: [] ,//总数据
				pageNo: 1, //页数
			}
		},
		
		mounted() { //监听页面加载
			let self = this
			self.getMessageList()
			//再渲染
			uni.$on('message_info', function() {
				self.getMessageList()
			})
		},
		methods: {
			/**
			 * @name 获取系统消息
			 */
			getMessageList() {
				let self = this
				//消息列表
				self.$api.fSysAnnountCementGetMyAnnouncementXx({
					pageNo: 1,
					pageSize: 10
				}).then((res) => {
					console.log(res.data.result.records);
					self.system_list = res.data.result.records
					self.system_list.forEach((item, index) => {
						item.sendTime = moment(item.createTime).format('YYYY.MM.DD');
					})
				}).catch(e=>{
					console.log(e);
				})
			},
			//跳转系统内容页
			systemToId:Debounce(
			function(id){
				uni.navigateTo({
					url: '/pages/message/messageInfo/messageInfo?id=' + id
				});
			}),
		},
		onReachBottom() {
			this.pageNo ++
			console.log(this.pageNo);
			//消息列表
			this.$api.fSysAnnountCementGetMyAnnouncementXx({
				pageNo: this.pageNo,
				pageSize: 10
			}).then((res) => {
				console.log(res.data.result.records);
				if(res.data.result.records.length != 0) {
					this.system_list = this.system_list.concat(res.data.result.records)
					console.log(this.system_list);
					this.system_list.forEach((item, index) => {
						item.sendTime = moment(item.createTime).format('YYYY.MM.DD');
					})
				}else{
					this.pageNo --
				}
			}).catch(e=>{
				console.log(e);
			})
		}
	}
</script>

<style lang="less">
	
	.kong {
		width: 674rpx;height: 674rpx; margin-bottom: 26rpx;position: fixed;top: 40%;left: 50%;transform: translate(-50%,-50%);display: flex;flex-direction: column;align-items: center;justify-content: center;
		&__text {
			display: block;font-size: 32rpx;text-align: center;
		}
	}

	.content {
		margin-left: 28rpx;
		margin-right: 28rpx;
		border-radius: 8rpx;
		padding: 16rpx;
		position: relative;
		&__title {
			flex: 1;
			color: rgba(51, 51, 51, 1);
			font-size: 30rpx;
		}
		&__box {
			flex: 1;height: 88rpx;border-bottom: 2rpx solid rgba(0,0,0,0.04);display: flex;align-items: center;
			&__content {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				&__time {
					color: rgba(108, 108, 108, 1);
					font-size: 24rpx;
				}
				&__go {
					font-size: 24rpx;
					color: rgba(49,114,182,1);
				}
			}
		}
		&__red {
			width: 10rpx;height: 10rpx;border-radius: 360upx;flex-direction: row;align-items: center;justify-content: center;position: absolute;right: 28rpx;bottom: 98rpx;padding: 10rpx;background-color: rgb(255,0,0);
		}
		
	}

</style>
